<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/mui.indexedlist.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style type="text/css" media="all">
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">选择产品</h1>
    </header>
    <div class="mui-content">
      <partial name="item"></partial>
    </div>
    <script type="text/x-template" id="item-template">
      <div id='list' class="mui-group-list">
        <div class="mui-group-list-search mui-input-row mui-search">
          <input type="search" class="mui-input-clear mui-input-speech" placeholder="搜索产品">
        </div>
        <ul class="mui-table-view mui-grid-view" v-cloak>
          <li v-on="tap:select(item)" v-repeat="item:list" class="mui-table-view-cell mui-media mui-col-xs-3">
            <img class="mui-media-object" v-attr="src:item.img||'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2651628541,3421601007&fm=116&gp=0.jpg'">
            <div class="mui-media-body">{{item.name}}</div>
          </li>
        </ul>
      </div>
    </script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/mui.indexedlist.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../app/vue-html5.js"></script>
    <script type="text/javascript" charset="utf-8">
      (function($, window, document, Vue) {
        window.vm = vm = new Vue.PageVm({
          el: '.mui-content',
          name: 'page product_select',
          model: 'Products',
          partials: {
            item: '#item-template',
          },
          data: function() {
            return {
              $currentWebView: null,
              $previousWebView: null,
              previousWebViewId: null,
            };
          },
          events: {
            show: function(data) {
              this.previousWebViewId = data.previousWebViewId;
              this.bind = data.bind;
              this.$previousWebView = plus.webview.getWebviewById(this.previousWebViewId);
            }
          },
          created: function() {
            this.loadList();
          },
          methods: {
            select: function(product) {
              var self = this;
              Vue.$emit(this.$previousWebView, 'setValue', {
                path: self.bind,
                value: product
              });
              $.back();
            }
          },
          mixins: [Vue.mixins.ajax, Vue.mixins.list]
        });
      })(mui, window, document, Vue);
    </script>
  </body>

</html>